<template>
    <el-breadcrumb separator="/" class="el-breadcrumb-show">
        <el-breadcrumb-item>
            <span class="el-breadcrumb-p">首页</span>
        </el-breadcrumb-item>
        <el-breadcrumb-item v-for="(item, index) in breadcrumbItems" :key="index">
            <span class="el-breadcrumb-p">{{ item.text }}</span>
        </el-breadcrumb-item>
    </el-breadcrumb>
</template>

<script lang="ts" setup>
import { computed } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();

const breadcrumbItems = computed(() => {
    const matched = route.matched.slice(0); // 排除根路由
    return matched.map((record: { meta: { title: any; }; name: any; path: any; }) => ({
        text: record.meta?.title || record.name, // 使用路由元信息的 title 或路由名称作为文本
        to: record.path,
    }));
});
</script>

<style scoped>
.el-breadcrumb-show {
    margin: 16px 1vw;
    -webkit-user-select: none;
    /* 适用于Chrome、Safari等浏览器 */
    -moz-user-select: none;
    /* 适用于Firefox浏览器 */
    -ms-user-select: none;
    /* 适用于IE浏览器 */
    user-select: none;
    /* 标准语法，适用于现代浏览器 */
}

.el-breadcrumb-p {
    -webkit-user-select: none;
    /* 适用于Chrome、Safari等浏览器 */
    -moz-user-select: none;
    /* 适用于Firefox浏览器 */
    -ms-user-select: none;
    /* 适用于IE浏览器 */
    user-select: none;
    /* 标准语法，适用于现代浏览器 */
    cursor: auto;
}
</style>